<template>
  <div style="padding: 0 50px">
    <el-carousel :interval="5000" arrow="always" style="height: 600px;" motion-blur>
      <el-carousel-item v-for="item in lbt" :key="item.id" style="height: 600px">
        <img :src="item.src" alt="" width="100%" height="100%"/>
      </el-carousel-item>
    </el-carousel>
    <div class="box">
      <div class="innerBox">
        <img src="../../assets/images/热品畅销.png" width="291" height="123">
      </div>
      <div class="outBox">
        <el-card v-for="item in hotProjects" style="width: 300px;margin-left: 40px" @dblclick="openDetail(item)" shadow="hover">
          <template #header>
            <img v-lazy="'http://localhost:8080/api/file/' + item.hanfuImage" style="width: 260px;height: 260px"/>
          </template>
          <h3>{{ item.hanfuName }}</h3>
          <div style="display: flex">
            <h5 style="color: red">￥{{ item.hanfuPrice }}</h5>
            <h5 style="color: gainsboro;margin-left: 20px">库存：{{ item.hanfuInventory }}</h5>
          </div>
        </el-card>
      </div>
    </div>
    <el-divider border-style="double" style="--el-border-color: black"></el-divider>
    <div class="box">
      <div class="innerBox">
        <img src="../../assets/images/新品上线.png" width="291" height="123">
      </div>
      <div class="outBox">
        <el-card v-for="item in newProjects" style="width: 300px;margin-left: 40px" @dblclick="openDetail(item)" shadow="hover">
          <template #header>
            <img v-lazy="'http://localhost:8080/api/file/' + item.hanfuImage" style="width: 260px;height: 260px"/>
          </template>
          <h3>{{ item.hanfuName }}</h3>
          <div style="display: flex">
            <h5 style="color: red">￥{{ item.hanfuPrice }}</h5>
            <h5 style="color: gainsboro;margin-left: 20px">库存：{{ item.hanfuInventory }}</h5>
          </div>
        </el-card>
      </div>
    </div>
    <el-backtop style="--el-backtop-hover-bg-color: rgb(245,108,108);--el-backtop-text-color: red" :right="100" :bottom="100" />
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {userApi} from "../../api/app";
import {useRouter} from "vue-router";

const items = [
  {src: "/src/assets/icons/img1.jpg"},
  {src: "/src/assets/icons/img2.jpg"},
]

const lbt = [
  { id: 1, src: '/src/assets/images/轮播图1.jpg' },
  { id: 2, src: '/src/assets/images/轮播图2.jpg' },
  { id: 3, src: '/src/assets/images/轮播图3.jpg' },
  { id: 4, src: '/src/assets/images/轮播图4.jpg' },
  { id: 5, src: '/src/assets/images/轮播图5.jpg' },
]

const hotProjects = ref(); // 热品
const newProjects = ref(); // 新品

const getData = () => {
  // 获取热品
  userApi.getHotHanfu({
    pageNum: 1,
    pageSize: 4
  }).then(response => {
    hotProjects.value = response.records;
  })
  // 获取新品
  userApi.getNewHanfu({
    pageNum: 1,
    pageSize: 4
  }).then(response => {
    newProjects.value = response.records;
  })
}

onMounted(() => {
  getData();
})

const router = useRouter();
// 跳转到商品详情页
const openDetail = (message) => {
  router.push({ path: '/main/productDetail',query: message });
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 600px;
  margin: 0;
  text-align: center;
}
.box {
  margin-top: 40px;
  margin-bottom: 20px;
}
.innerBox {
  display: flex;
  justify-content: center;
}
.outBox {
  display: flex;
  margin-top: 50px;
}
</style>